<template>
    <div class="father">
        <h3>父组件</h3>
        <p>我有{{ num }} 套房子</p>
        <Child ref="c1"></Child>
        <Child2 ref="c2"></Child2>
        <button @click="getBook1">获取子组件1的书籍数量</button>
        <button @click="changeRefs($refs)">通过refs修改组件1和组件2的数量</button>
    </div>
</template>

<script setup lang="ts" name="RefsT">
import { ref } from 'vue';
import Child from "@/components/demo6/Child.vue";
import Child2 from "@/components/demo6/Child2.vue";
let num = ref(20)
let c1 =ref();
let c2 = ref();

function getBook1() {
    console.log(c1.value); 
}
//通过$refs获取子组件数据
function changeRefs(list:any) {
   for (let key in list) {
    console.log(key,list[key].toy,list[key].bookNum);
    list[key].bookNum+=10;
   }
   
}

defineExpose(num)


</script>

<style scoped>
.father {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px 0;
    background-color: #f9f9f9;
}
</style>
